body {
  margin: 0;
}

button {
  border: 1px solid #b3d8ff;
  border-radius: 4px;
  color: #409eff;
  background: #ecf5ff;
  line-height: 1;
  cursor: pointer;
  transition: 0.1s;
  padding: 9px 12px;
}

.game {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  .bg {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: url(../src/assets/bg.jpg);
    background-size: cover;
    filter: blur(0px);
  }

  .game-info {
    margin-bottom: 30px;
    margin-top: 200px;
    font-size: 20px;
    color: #fff;
  }

  .game-board {
    .square,
    .square-winner {
      background: #fff;
      border-radius: 0;
      float: left;
      font-size: 24px;
      font-weight: bold;
      line-height: 34px;
      margin-right: -1px;
      margin-top: -1px;
      padding: 0;
      text-align: center;
      width: 60px;
      height: 60px;
    }

    .square-winner {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
    }
  }
}

.game-history-sort {
  position: absolute;
  top: 0;
  left: 180px;
  margin: 10px;
  z-index: 999;

  &.game-history-sort-active {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }

  &.game-history-sort-inactive {
  }
}

.game-history {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;

  .historyActive {
    margin: 10px;
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }

  .historyInactive {
    margin: 10px;
  }
}
